<template>
	<view class="box box-item footer">
		<p>已创建的关系</p>
		<view class="tasks">
			<view v-for="(item,index) in props.getTasks" class="item">
				<a @click="openCpd(index)">
					<span v-for="i in item" :key="i">{{i}}</span>
				</a>
				<image src="/static/delete.png" @click="del(index)" mode="widthFix" style="width: 20px; height: 20px;"
					class="img"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(['getTasks'])
	const emit = defineEmits(['delTask'])
	const openCpd = (index) => {
		uni.navigateTo({
			url: '/pages/computed/index?index=' + index
		})
	}
	const del = (index) => {
		emit('delTask', index)
	}
</script>

<style scoped>
	.box {
		width: 90%;
		text-align: center;
		padding: 50rpx 10rpx;
		margin: 30px;
	}

	.tasks {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: space-around;
		flex-wrap: wrap;
		padding: 0 10px;
	}

	.item {
		background-color: lavenderblush;
		border: 1px solid lightcoral;
		color: lightcoral;
		padding: 10px;
		margin-right: 5px;
		min-width: 20%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 10px;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	span{
		margin-left: 5rpx;
		padding: 5rpx;
	}
</style>